<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="240px"
      label-position="left">
      <el-form-item label="真实姓名" prop="comContactName">
        <el-input v-model="formData.comContactName" placeholder="请输入真实姓名" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="证件类型" prop="field122">
        <el-select v-model="formData.field122" placeholder="请选择证件类型" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in field122Options" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件证号" prop="personIdCard">
        <el-input v-model="formData.personIdCard" placeholder="请输入证件证号" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="联系人手机号" prop="personTel">
        <el-input v-model="formData.personTel" placeholder="请输入联系人手机号" clearable :style="{width: '100%'}"
                  disabled>
          <el-select v-model="formData.phoneType" slot="prepend" placeholder="请选择" style="width: 170px" disabled>
            <el-option :label="item.label" :value="item.value" v-for="item in phoneSource"></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="通讯地址" prop="field124">
        <el-cascader v-model="formData.field124" :options="citydata" :props="field124Props"
                     :style="{width: '100%'}" placeholder="请选择通讯地址" clearable
                     @change="changeAddress"></el-cascader>
      </el-form-item>
      <el-form-item label="通讯地址详情" prop="field125">
        <el-input v-model="formData.field125" type="textarea" placeholder="请输入通讯地址详情" :maxlength="100"
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}" @change="changeAddress"></el-input>
      </el-form-item>
      <el-form-item label-width="1px" label="" prop="field120">
        <el-checkbox-group v-model="formData.field120" size="medium">
          <el-checkbox label="1" :key="1">
            我已阅读并同意《实名认证主体变更协议》
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item size="large">
        <el-button @click="lastStep">上一步</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {getCityList} from "@/api/option";

export default {
  components: {},
  props: ['dataInfo'],
  data() {
    return {
      phoneSource: [
        {
          label: '中国大陆（+86）',
          value: '1'
        }
      ],
      formData: {
        id: '',
        comContactName: '',
        field122: '1',
        personIdCard: '',
        field124: [],
        field125: '',
        unitType: 1,
        personTel: '',
        phoneType: '',
        personAddr: '',
        field120: []
      },
      rules: {
        comContactName: [{
          required: true,
          message: '请输入真实姓名',
          trigger: 'blur'
        }],
        field122: [{
          required: true,
          message: '请选择证件类型',
          trigger: 'change'
        }],
        personIdCard: [{
          required: true,
          message: '请输入证件证号',
          trigger: 'blur'
        }, {
          pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[Xx\d]$/,
          message: '非法身份证号',
          trigger: 'blur'
        }],
        field124: [{
          required: true,
          type: 'array',
          message: '请至少选择一个通讯地址',
          trigger: 'change'
        }],
        field125: [{
          required: true,
          message: '请输入通讯地址详情',
          trigger: 'blur'
        }],
        field120: [{
          required: true,
          type: 'array',
          message: '请确认阅读实名认证主体变更协议',
          trigger: 'change'
        }],
      },
      field122Options: [{
        "label": "身份证",
        "value": 1
      }, {
        "label": "港澳剧名来往内地通行证",
        "value": 2
      }, {
        "label": "台湾剧名来往大陆通行证",
        "value": ""
      }],
      citydata: [],
      field124Props: {
        expandTrigger: 'hover',
        children: 'children',
        label: 'name',
        value: 'name',
        checkStrictly: 'true'
      },

    }
  },
  computed: {},
  watch: {
    dataInfo: {
      deep: true,
      handler(val) {
        this.formData.personTel = val.phone
        this.formData.phoneType = val.phoneType
      }
    }
  },
  created() {
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      console.log(this.dataInfo)
      this.formData.personTel = this.dataInfo.phone
      this.formData.phoneType = this.dataInfo.phoneType
      this.formData.id = this.dataInfo.id
      getCityList({pid: 0}).then(response => {
        this.citydata = response.data;
      });
    },
    changeAddress() {
      let address = ''
      for (let i = 0; i < this.formData.field124.length; i++) {
        address = address + this.formData.field124[i]
      }
      this.formData.personAddr = address + this.formData.field125
      console.log(this.formData.personAddr)
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        this.$emit('submit', this.formData)
      })
    },
    lastStep() {
      this.$emit('lastStep')
    }
  }
}

</script>
<style>
</style>
